import Icon from '@/components/Icon'
import { useMove } from '@/hooks'
import { RootState } from '@/store'
import { history } from '@/utils/history'
import { Input, NavBar } from 'antd-mobile'
import classnames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'
// 导入 io 插件
import { io, Socket } from 'socket.io-client'
import styles from './index.module.scss'

type ChatItem = {
  type: 'xz' | 'user'
  message: string
}
const Chat = () => {
  // 存取 socketIo实例
  const socketRef = useRef<Socket>()
  const chatListRef = useRef<HTMLDivElement>(null)

  // 1. 聊天列表的数据
  const [list, setList] = useState<ChatItem[]>([
    {
      type: 'xz',
      message: '你好，我是小智',
    },
    {
      type: 'user',
      message: '你好小智，来来来',
    },
  ])
  // 2. 聊天输入框的内容
  const [msg, setMsg] = useState('')
  // 3.用户发送消息
  const sendMessage = () => {
    /**
     * 1. 非空判断
     * 2. 发送消息，显示到聊天列表
     * 3.发送消息给服务器
     */
    if (!msg) return
    setList([
      ...list,
      // 追加聊天的内容
      {
        type: 'user',
        message: msg,
      },
    ])
    // 发送消息给ws服务器
    socketRef.current?.emit('message', {
      msg,
      timestamp: Date.now(),
    })
    setMsg('')
  }
  // 4.引用socket建立链接
  // 获取token
  const {
    token: { token },
  } = useSelector((state: RootState) => state.login)
  // 组件挂载时 创建 webSocket 链接
  useEffect(() => {
    socketRef.current = io('http://toutiao.itheima.net', {
      query: {
        // 用户token
        token,
      },
      transports: ['websocket'],
    })
    socketRef.current.on('connect', () => {
      console.log('客户端和服务端创建链接成功')
      // 小智给用户打个招呼
      setList([
        ...list,
        {
          type: 'xz',
          message: 'hi,旺旺旺',
        },
      ])
    })
    // ==接收====接收服务器发送的消息
    socketRef.current.on('message', (data) => {
      // 后台返回数据展示
      // 如果拿不到之前的数据 将其改成函数形式获取上一次的值即可
      setList((preList) => [
        ...preList,
        {
          type: 'xz',
          message: data.msg,
        },
      ])
    })
    return () => {
      // 组件销毁关闭socket 链接，释放服务器的资源
      socketRef.current?.close()
    }
  }, [])
  // 聊天自滚动
  /**
   * 1. 获取聊天列表的dom对象
   * 2. 获取聊天列表滚动高度
   * 3. 执行滚动
   */
  useMove(chatListRef.current, list, 'top')
  // useEffect(() => {
  //   const divRef = chatListRef.current
  //   if (!divRef) return
  //   console.log('滚动高度top', divRef.scrollTop)
  //   console.log('height', divRef.scrollHeight)
  //   divRef.scrollTo({
  //     top: divRef.scrollHeight,
  //     behavior: 'smooth',
  //   })
  //   // divRef.scrollTop = divRef.scrollHeight
  // }, [list])
  return (
    <div className={styles.root}>
      {/* 头部导航 */}
      <NavBar className="fixed-header" onBack={() => history.go(-1)}>
        小智同学
      </NavBar>
      {/* 聊天列表 */}

      <div className="chat-list" ref={chatListRef}>
        {/* self类名是小智 (左边)；user类名是用户 (右边) */}
        {list.map((item, index) => (
          <div
            key={index}
            className={classnames(
              'chat-item',
              item.type === 'xz' ? 'self' : 'user'
            )}>
            {item.type === 'xz' ? (
              <Icon icon="iconbtn_xiaozhitongxue" />
            ) : (
              <img src="http://geek.itheima.net/images/user_head.jpg" alt="" />
            )}
            <div className="message">{item.message}</div>
          </div>
        ))}
      </div>
      {/* 聊天输入框 */}
      <div className="input-footer">
        <Input
          onEnterPress={sendMessage}
          className="no-border"
          placeholder="请描述您的问题"
          value={msg}
          onChange={setMsg}
        />
        <Icon icon="iconbianji" />
      </div>
    </div>
  )
}

export default Chat
